<template>
    <div id="user">
        <div class="user">
            <van-image round width="80px" height="80px"
                src="http://yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png" />
            <van-cell title="点击登录" is-link />
        </div>

        <div class="api">
            <van-grid :column-num="3">
                <van-grid-item v-for="item in apiList" :key="item.id" :icon="item.icon" :text="item.name"
                    @click="point()" />
            </van-grid>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant';
import { Notify } from 'vant';
export default {
    data() {
        return {
            apiList: [
                { id: 1, name: '我的订单', icon: 'label-o' },
                { id: 2, name: '优惠券', icon: 'bill-o' },
                { id: 3, name: '礼品卡', icon: 'goods-collect-o' },
                { id: 4, name: '我的收藏', icon: 'location-o' },
                { id: 5, name: '我的足迹', icon: 'flag-o' },
                { id: 6, name: '会员福利', icon: 'user-o' },
                { id: 7, name: '地址管理', icon: 'aim' },
                { id: 8, name: '账号安全', icon: 'warn-o' },
                { id: 9, name: '联系客服', icon: 'manager-o' },
                { id: 10, name: '帮助中心', icon: 'question-o' },
                { id: 11, name: '意见反馈', icon: 'photo-o' },
            ]
        }
    },
    methods: {
        point() {
            Toast.loading({
                message: '加载中...',
                forbidClick: true,
                loadingType: 'spinner',
                duration: 5000
            });
            setTimeout(() => {
                Notify({ type: 'danger', message: '加载失败' });
            }, 5100)
        }
    }
}
</script>

<style lang="less" scoped>
#user {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .user {
        width: 100%;
        height: 140px;
        background-color: #333;
        display: flex;
        align-items: center;
        justify-content: center;

        .van-cell {
            width: 280px;
            height: 66px;
            font-size: 21px;
            align-items: center;
            background-color: #333;
            color: #fff;
        }
    }

    .api {
        overflow: hidden;
        border-top: 2px solid #cdcdcd;

        .van-grid-item {
            height: 128px;
            border-bottom: 2px solid #cdcdcd;
            border-right: 2px solid #cdcdcd;
        }

        .van-grid-item:nth-child(3n) {
            border-right: none
        }
    }
}
</style>